<template>
	<div class="content">
		<div class="container">
			<van-swipe :autoplay="3000" @change="onChange" :touchable="true" :show-indicators="false">
				<van-swipe-item v-for="(item1, idx) in news_list" :key="idx" @click="checkDetail(idx)">
					<img :src="item1.cover" />
					<p class="tips">{{item1.title}}</p>
				</van-swipe-item>
				<!-- <template #indicator>
					<div class="indicator-box">
						<div
							class="custom-indicator"
							v-for="(item, index) in news_list"
							:key="index"
							:style="current == index ? 'border-bottom: .2rem solid #fff' : 'border-bottom: .2rem solid #D2EDF5'"
						></div>
					</div>
				</template> -->
			</van-swipe>
		</div>
		<div class="news_box">
			<!-- <div class="title">行业动态</div> -->
			<div class="news_list" v-for="(item, idx) in news_list" :key="idx">
				<div class="news_item" @click="goDetail(idx)">
					<div class="item_img"><img :src="item.cover" alt="新闻图片" /></div>
					<div class="item_content">
						<div class="content_title">{{ item.title }}</div>
						<div class="content_text">{{ item.account }}</div>
					</div>
				</div>
			</div>
		</div>
		<footer-comp></footer-comp>
	</div>
</template>

<script>
import { Notify } from 'vant';
export default {
	name: 'index',
	data() {
		const that = this;
		return {
			current: 0,
			swiperList: [],
			news_list: [],
			redirectHref: localStorage.getItem('redirectHref')
		};
	},
	components: {
		// Swiper,
		// SwiperSlide
	},
	mounted() {
		// this.getSwiperList()
		this.getNewsList()
	},
	created() {
		const ua = window.navigator.userAgent.toLowerCase();
		// 判断是否为手机UA 模拟器亦可 浏览器通过微信接口获取code
		if(ua.match(/MicroMessenger/i) == 'micromessenger'){
		   this.sq() //开启后可以在浏览器进行本地调试
		  return true;
		} else {
			this.sq() //开启后禁止从浏览器访问
		  return false;
		}
	},
	methods: {
		// 查看新闻详情
		goDetail(idx){
			let data = this.news_list
			if(data[idx].url=='0'){
				Notify({ type: 'primary', message: '暂无详情' });
			}else{
				window.location.href=data[idx].url
			}
		},
		// 点击轮播图跳转新闻详情
		checkDetail(idx){
			this.goDetail(idx)
		},
		// 获取轮播图
		// getSwiperList() {
		// 	let openid = localStorage.getItem('openid')
		// 	this.$axios.post('news/index',{openid:openid})
		// 	.then(res => {
		// 		if(res.data.code==2000){
		// 			this.swiperList = res.data.data
		// 		}else{
		// 			Notify({ type: 'warning', message: res.data.msg });
		// 		}
		// 	})
		// },
		// 获取新闻
		getNewsList(){
			let openid = localStorage.getItem('openid')
			this.$axios.post('info/index',{openid:openid})
			.then(res => {
				if(res.data.code==2000){
					this.news_list = res.data.data
					console.log(this.news_list)
				}else{
					Notify({ type: 'warning', message: res.data.msg });
				}
			});
		},
		onChange(index) {
			this.current = index;
		},
		getval(url, name) {
			//url截取
			var reg = new RegExp('(^|\\?|&)' + name + '=([^&|#]*)(\\s|&|#|$)', 'i'); // 因为vue有添加“#”的特点，所以这里的正则表达式会匹配 & -- &/#
			console.log('reg.test(url) '+reg.test(url))
			if (reg.test(url)) return unescape(RegExp.$2.replace(/\+/g, ' '));
			return '';
		},
		sq() {
		  // let locationUrl = window.location.href;
		  let locationUrl = 'http://kf.laigl.com/vue';
		  let openid = localStorage.getItem("openid") || false;  // 从内存取得openid
			console.log(locationUrl)
			console.log(window.location.href)
		  if (!openid) {  // 内存内没有openid
		    // 检测是否参数内有code，若有则跳接口获取openid，若没有则跳授权页
		   console.log('内存内没有openid')
		    if (window.location.href.indexOf("code") >= 0) {  // 链接里有code
		     console.log(window.location.href)
				 console.log(locationUrl)
				 console.log('链接里有code')
					this.$axios.post("user/getuser", {
		          code: this.getval(window.location.href, 'code'),
		      }).then((res) => {
						console.log(res)
						console.log(this.redirectHref)
		        if (res.data.code == 2000) {
		          localStorage.setItem("openid", res.data.data.openid);
		          localStorage.setItem("nickname", res.data.data.nickname);
		          localStorage.setItem("userheadimg", res.data.data.headimgurl);
		          localStorage.setItem("sex", res.data.data.sex);
		          localStorage.setItem("city", res.data.data.city);
		          localStorage.setItem("province", res.data.data.province);
		          localStorage.setItem("user_id", res.data.data.user_id);
							localStorage.setItem("res", JSON.stringify(res.data.data));
							localStorage.setItem('code',this.getval(window.location.href, 'code'))
							 window.location.href = '/vue/#'
		        }
		        else {
		          console.log('登陆失败' + res.data.msg);
		        }
		      }).catch((err) => {
		        console.error('登陆失败' + err);
		      })
		    } else {  // 链接里没有code
					console.log('链接里没有code')
		      let redirectHref = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
		        + 'wxe0921bf3f929e06c'
		        + '&redirect_uri='
		        + encodeURIComponent(locationUrl)
		        + '&response_type=code&scope=snsapi_base&state=STATE'
		        + '#wechat_redirect';
						console.log('请求授权地址'+redirectHref)
						console.log(this.redirectHref)
		      window.location.href = redirectHref;  // 跳转微信链接获取code和state（state没啥用目前暂时）
		
		    }
		  } else {  // 内存里有openid
			console.log('内存里有openid')
		    let member = {};
		    member.nickName = localStorage.getItem("nickName");
		    member.userHeadimg = localStorage.getItem("userHeadimg");
		    member.amount = localStorage.getItem("amount");
		    member.user_id = localStorage.getItem("user_id");
		    localStorage.setItem('userInfo', JSON.stringify(member));
		  }
		}
	}
};
</script>
<style lang="less" rel="stylesheet/less">
.content {
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	background: #F6F7FA;
	.container {
		position: relative;
		.van-swipe {
			width: 100%;
			height: 13.2rem;
			.van-swipe-item{
				position: relative;
				.tips{
					width: 100%;
					height: 1.5rem;
					position: absolute;
					box-sizing: border-box;
					bottom: 0;
					left: 0;
					background: linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.4));
					color: #fff;
					padding-left: 1rem;
					box-shadow: 0 -1rem 1rem rgba(0,0,0,.4);
				}
			}
			
			// .indicator-box {
			// 	width: 12rem;
			// 	height: 0.5rem;
			// 	text-align: center;
			// 	position: absolute;
			// 	left: 30%;
			// 	bottom: 1.2rem;
			// 	.custom-indicator {
			// 		width: 1.2rem;
			// 		height: 0.4rem;
			// 		margin-right: 0.6rem;
			// 		display: inline-block;
			// 	}
			// }
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.news_box {
		width: 100%;
		padding: 1.1rem 2rem;
		background-color: #fff;
		.title {
			width: 100%;
			text-align: left;
			font-size: 1.3rem;
			letter-spacing: 0.2rem;
			font-weight: 600;
		}
		.news_list {
			width: 100%;
			height: 8rem;
			// margin: 1.5rem 0 1.2rem 0;
			border-bottom: 1px solid #eee;
			padding: 1.2rem 0 0.4rem 0;
			.news_item {
				width: 100%;
				height: 7.5rem;
				box-sizing: border-box;
				.item_img,
				.item_content {
					display: inline-block;
					vertical-align: top;
				}
				.item_img {
					width: 25vw;
					height: 25vw;
					overflow: hidden;
					box-shadow: 0.1rem 0.5rem 0.5rem #ccc;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: 3px;
					}
				}
				.item_content {
					width: 60vw;
					padding-left: 0.2rem;
					.content_title {
						margin-top: 0.7rem;
						letter-spacing: 0.2rem;
						width: 16rem;
						text-align: left;
						padding-left: 1rem;
						font-size: 1.1rem;
						font-family: '微软雅黑';
						margin-bottom: 0.5rem;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box; //作为弹性伸缩盒子模型显示。
						-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
						-webkit-line-clamp: 1; //显示的行
					}
					.content_text {
						padding-left: 1rem;
						font-size: 1.1rem;
						line-height: 1.5rem;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box; //作为弹性伸缩盒子模型显示。
						-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
						-webkit-line-clamp: 2; //显示的行
						color: #ccc;
					}
				}
			}
		}
	}
}
</style>
